<template>
  <el-container class="portalManage">
    <el-aside style="float: left; width: 230px;">
      <el-card class="box-card el-card-flex portalCard">
        <el-tabs class="el-flex el-tabs-flex" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane class="el-flex el-box-column el-over-auto" label="布局" name="layout" style="height: 100%;">
            <p class="cl-title">添加行布局</p>
            <div class="cl-option">
              <draggable
                :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                class="dragArea"
                @end="end_layout"
                :list="layoutList"
              >
                <el-row class="rowStyle" v-for="(itemRow, indexRow) in layoutList" :key="indexRow">
                  <el-col :span="itemIn.num" v-for="(itemIn, indexIn) in itemRow" :key="indexIn">
                    <div class="grid-content bg-purple">{{itemIn.num}}</div>
                  </el-col>
                </el-row>
              </draggable>
            </div>
          </el-tab-pane>
          <el-tab-pane class="el-flex el-box-column el-over-auto" label="组件" name="component" style="height: 100%;">
            <p class="cl-title">元素库</p>
            <ul v-for="(itemLi, indexLi) in componentsList" :key="indexLi">
              <li v-for="(itemIn, indexIn) in itemLi" :key="indexIn">
                <span class="projectName" @click="startRotate(itemIn, indexIn)"><i :class="[itemIn.open?'el-icon-caret-right bottom':'el-icon-caret-right right']"></i>  {{itemIn.title}}</span>
                  <div class="projectIcon el-box" v-show="itemIn.open">
                    <div class="imgBox" v-for="(itemImg, indexImg) in itemIn.imgList" :key="indexImg" style="cursor: pointer;">
                      <draggable
                        :options="{group:{name: falgs,pull:'clone'},filter: '.undraggable', sort: false}"
                        class="dragArea"
                        @end="end_component"
                        :list="[{name: itemImg.componentName, title: itemImg.caption}]"
                      >
                        <img :src="itemImg.imgs" alt="">
                        <p>{{itemImg.caption}}</p>
                      </draggable>
                    </div>
                  </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-aside>
    <el-main style="padding: 0 0 0 10px;">
      <el-card class="box-card el-card-flex">
        <div slot="header" class="clearfix">
          <span>{{'门户页面管理'}}</span>
          <div style="float: right">
            <el-button type="danger" plain>
              保存
              <i class="el-icon-circle-check"></i>
            </el-button>
            <router-link :to="{path: '/preview'}">
              <el-button type="info" plain style="margin-left: 5px;">
                预览
                <i class="el-icon-view"></i>
              </el-button>
            </router-link>
            <el-button type="info" plain style="margin-left: 5px;">
              恢复默认模板
              <i class="el-icon-refresh"></i>
            </el-button>
            <el-button type="info" plain style="margin-left: 5px;">
              返回
              <i class="el-icon-refresh-right"></i>
            </el-button>
          </div>
        </div>
        <div class="text item" style="padding: 0px;">
          <div class="navigation" v-show="showTopBar">
            <topBar class="topBarStyle"></topBar>
            <topMenu class="topMenuStyle"></topMenu>
          </div>
          <div class="el-flex scroll">
            <div class="layoutTips" v-show="showTips">拖拽布局至此</div>
            <!-- 拖拽布局 -->
            <layoutContent
              v-show="!showContent"
              @handleDel="handleDel"
              :layoutArr="layoutArr"
            />
            <!-- 拖拽组件 -->
            <componentsContent
              v-show="showContent"
              :layoutArr="layoutArr"
            />
          </div>
        </div>
        <div class="portalFooter" v-show="showFoot">
          <el-button type="danger" @click="clearLayout">
            清空所有布局
          </el-button>
          <el-button type="info">
            另存为布局模板
          </el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
import { Dialog, MessageBox, Message, Drawer, Tabs, TabPane, Menu, Submenu } from 'element-ui'
import topBar from '../../layout/topBar' // 引入顶部logo
import topMenu from '../../layout/topMenu' // 引入顶部菜单
import draggable from 'vuedraggable' // 引入拖拽
import layoutContent from './layoutContent' // 布局内容
import componentsContent from './componentsContent' // 组件内容
const layoutList = [
  [
    {
      num: 24,
      childList: []
    }
  ],
  [
    {
      num: 16,
      childList: []
    },
    {
      num: 8,
      childList: []
    }
  ],
  [
    {
      num: 8,
      childList: []
    },
    {
      num: 16,
      childList: []
    }
  ],
  [
    {
      num: 8,
      childList: []
    },
    {
      num: 8,
      childList: []
    },
    {
      num: 8,
      childList: []
    }
  ],
  [
    {
      num: 6,
      childList: []
    },
    {
      num: 6,
      childList: []
    },
    {
      num: 6,
      childList: []
    },
    {
      num: 6,
      childList: []
    }
  ]
]
const componentsList= [
  [
    {
      title: '公告',
      open: true,
      imgList: [
        {
          imgs: require('@/assets/img/FsNotice@2x.png'),
          caption: '公告',
          componentName: 'announcement',
        }
      ],
    }
  ],
  [
    {
      title: '集团新闻',
      open: true,
      imgList: [
        {
          imgs: require('@/assets/img/FsProject.png'),
          caption: '集团新闻',
          componentName: 'groupNews',
        }
      ],
    }
  ],
  [
    {
      title: '任务',
      open: true,
      imgList: [
        {
          imgs: require('@/assets/img/FsTask@2x.png'),
          caption: '任务',
          componentName: 'componentsProject',
        }
      ],
    }
  ],
  [
    {
      title: '其他',
      open: true,
      imgList: [
        {
          imgs: require('@/assets/img/FsFile@2x.png'),
          caption: '文库',
          componentName: 'library',
        },
        {
          imgs: require('@/assets/img/FsFile@2x.png'),
          caption: '统一审批中心',
          componentName: 'componentsApproval',
        },
        {
          imgs: require('@/assets/img/FsAppCommonApp@2x.png'),
          caption: '常用功能',
          componentName: 'userFunction',
        },
        {
          imgs: require('@/assets/img/FsSchedule@2x.png'),
          caption: '日程',
          componentName: 'calendar',
        },
        {
          imgs: require('@/assets/img/FsMessageCenter@2x.png'),
          caption: '消息中心',
          componentName: 'messageCenter',
        }
      ],
    }
  ]
]
export default {
  name: 'portalManage',
  components: {
		'el-dialog': Dialog, // 对话框
    'el-drawer': Drawer, // 抽屉
    'el-tabs': Tabs, // 标签页
    'el-tab-pane': TabPane, // 标签页列
    'el-menu': Menu, // 菜单
    'el-submenu': Submenu,
    topBar, // 顶部logo
    topMenu, // 顶部菜单
    draggable, // 拖拽
    layoutContent, // 布局
    componentsContent, // 组件
  },
  data() {
    return {
      activeName: 'layout',
      // rotate: true, // 点击旋转动画
      showTopBar: false, // 在切换到组件时显示引入的顶部logo和菜单
      showFoot: true, // 在切换到布局时显示底部按钮
      falgs: 'article', // 要实现两个组件之间的拖拽，需要两个组件的options的group名称保持一致！group：'111'或者group:{name:'111'}，写法都可以
      layoutList: JSON.parse(JSON.stringify(layoutList)), // 布局
      componentsList: JSON.parse(JSON.stringify(componentsList)), // 组件
      layoutArr: [],
      showContent: '', // 在切换到组件和布局时显示相应的内容
      showTips: true // 没有拖拽布局时显示提示
    }
  },
  methods: {
    // 切换tabs事件
    handleClick(val) {
      if (val.name == "component") {
        this.showTopBar = true
        this.showFoot = false
        this.showContent = true
        this.showTips = false
      } else if (val.name == "layout") {
        this.showTopBar = false
        this.showFoot = true
        this.showContent = false
      }
    },
    // 点击项目实现动画效果事件
    startRotate (data, index) {
      data.open = !data.open
    },
    // 布局拖放结束后的回调函数
    end_layout (ev) {
      // console.log(2, ev)
      this.showTips = false
      // 拖拽结束后还原layoutList数组
      this.layoutList = JSON.parse(JSON.stringify(layoutList))
    },
    // 组件拖放结束后的回调函数
    end_component (ev) {
      // console.log(2, ev)
      // this.showTips = false
    },
    // 删除布局事件
    handleDel (index) {
      this.layoutArr.splice(index, 1)
      if (this.layoutArr.length == 0) {
        this.showTips = true
      }
    },
    // 清空布局事件
    clearLayout () {
      this.layoutArr = []
    }
  }
}
</script>
<style lang="scss">
.portalManage {
  // 布局样式
  .rowStyle {
    cursor: pointer;
    position: relative;
    & + .rowStyle {
      margin-top: 10px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      line-height: 36px;
      text-align: center;
      color: #bebebe;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .delete-grid {
      width: 17px;
      height: 17px;
      text-align: center;
      line-height: 17px;
      position: absolute;
      right: -6px;
      top: -6px;
      border-radius: 50%;
      background-color: #909399;
      cursor: pointer;
      .el-icon-close {
        color: #ffffff;
      }
    }
  }
  .portalCard {
    .el-tabs__header {
      margin-bottom: 0;
      .el-tabs__nav {
        padding: 0 20px;
        .el-tabs__active-bar {
          padding-left: 34px;
        }
      }
    }
    .cl-title {
      height: 36px;
      line-height: 36px;
      background: #f9f9f9;
      color: #111111;
      font-size: 14px;
      padding-left: 10px;
    }
    .cl-option {
      padding: 0 10px;
    }
    ul{
      padding: 8px 10px;
      li {
        .projectName {
          display: inline-block;
          padding: 5px 0;
          cursor: pointer;
          .right {
            transition: all 0.5s;
          }
          .bottom {
            transform:rotate(90deg);
            transition: all 0.5s;
          }
        }
        .projectIcon {
          // display: flex;
          // justify-content: space-between;
          flex-wrap: wrap;
          .imgBox {
            margin-left: 7px;
            img {
              width: 58px;
              height: 48px;
            }
            p{
              width: 58px;
              font-size: 12px;
              color: #888888;
              text-align: center;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .navigation {
    .topBarStyle {
      pointer-events: none;
      .el-header {
        padding: 0 10px;
      }
    }
    .topMenuStyle {
      pointer-events: none;
      padding: 0;
      .el-menu {
        display: flex;
      }
    }
  }
  .scroll {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .portalFooter {
    height: 60px;
    line-height: 60px;
    text-align: right;
    padding-right:10px;
    border-top: 1px solid #EBEEF5;
  }
  .layoutTips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    margin-left: 12%;
    font-size: 14px;
    text-align: center;
    color: #888888;
  }
  .dragAreaAll {
    // padding: 0 14px;
    box-sizing: border-box;
  }
}
</style>